<template>
  <commonDrawer :model-value="modelValue" @close="cancel" @save="save" :title="title" size="50%">
    <el-scrollbar>
      <el-form ref="formRef" :model="projectInfo" :rules="projectRules">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model.trim="projectInfo.projectName" maxlength="100" show-word-limit placeholder="请输入项目名称"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="项目编号" prop="projectNum">
          <el-input v-model.trim="projectInfo.projectNum" maxlength="100" show-word-limit placeholder="请输入项目编号"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="项目分类" prop="mapId">
          <el-select v-model="projectInfo.mapId" placeholder="请选择项目分类">
            <el-option v-for="item in state.mapList" :key="item.id" :label="item.value" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime">
          <el-form-item prop="beginTime">
            <el-date-picker format="YYYY-MM-DD hh:mm:ss"
                            v-model="projectInfo.beginTime" value-format="YYYY-MM-DD hh:mm:ss" type="datetime"
                            placeholder="请选择开始时间"/>
          </el-form-item>
        </el-form-item>
        <el-form-item label="结束时间" prop="overTime">
          <el-date-picker format="YYYY-MM-DD hh:mm:ss" v-model="projectInfo.overTime" type="datetime"
                          placeholder="请选择结束时间" value-format="YYYY-MM-DD hh:mm:ss"/>
        </el-form-item>
        <el-form-item label="项目描述" prop="projectDescription">
          <markdown v-model="projectInfo.projectDescription"></markdown>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </commonDrawer>
</template>

<script>
import { onBeforeMount, reactive, ref, toRefs } from 'vue'
import { addProjectUrl, queryMapListUrl, queryProjectDetailUrl, updateProjectByIdUrl } from '@/api/api'
import { get, post } from '@/utils/httpRequest'
import { projectInfoRules } from '@/utils/verifyForm'
import { ElMessage } from 'element-plus'
import { propsConst } from '@/utils/propsConstant'

export default {
  name: 'projectInfo',
  setup (props, { emit }) {
    const {
      type,
      id,
      title
    } = toRefs(props)
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const state = reactive({
      mapList: []
    })
    const formRef = ref(null)
    const projectRules = reactive(Object.assign(projectInfoRules, {
      overTime: [
        {
          required: true,
          message: '结束时间不能为空',
          trigger: 'change'
        },
        {
          validator: (rule, value, callback) => {
            if (projectInfo.value.beginTime >= value) {
              callback(new Error('开始时间必须小于结束时间！'))
            } else {
              callback()
            }
          },
          trigger: 'change'
        }
      ]
    }))
    const projectInfo = ref({
      projectName: null,
      projectNum: null,
      projectDescription: '',
      parentId: 0,
      type: 1,
      beginTime: null,
      overTime: null,
      mapId: null
    })
    const save = () => {
      formRef.value.validate().then(async () => {
        let result
        switch (type.value) {
          case 1:
            result = await post(addProjectUrl, projectInfo.value)
            break
          case 3:
            result = await post(addProjectUrl, projectInfo.value)
            break
          case 2:
            result = await post(updateProjectByIdUrl, projectInfo.value)
            break
        }
        if (result.code === 200) {
          ElMessage.success(`${title.value}成功！`)
          emit('save')
          cancel()
        }
      })
    }
    const computedOperate = () => {
      switch (type.value) {
        // 新增
        case 1:
          projectInfo.value.parentId = 0
          break
        // 编辑项目
        case 2:
          queryProjectDetailAsync()
          break
        // 新增子项目
        case 3:
          projectInfo.value.parentId = id.value
          break
      }
    }
    const queryProjectDetailAsync = async () => {
      const result = await post(queryProjectDetailUrl, { id: id.value })
      if (result.code === 200) {
        projectInfo.value = result.data
      }
    }
    const queryMapListAsync = async () => {
      const result = await get(queryMapListUrl, { type: 1 })
      if (result.code === 200) {
        state.mapList = result.data
      }
    }
    onBeforeMount(() => {
      computedOperate()
      queryMapListAsync()
    })
    return {
      cancel,
      state,
      save,
      formRef,
      projectInfo,
      projectRules
    }
  },
  props: propsConst
}
</script>

<style scoped>

</style>
